<template>
  <div class="my-account-box">
		<heading-title :title="title" />
    <div class="my-account-box-container">
      <el-row :gutter="40">
        <el-col :xs="24" :sm="6">
					<ul>
						<li v-for="(item, index) in leftList" :key="index" :class="item.active?'active': ''" @click="_click(index)" >{{item.name}}</li>
					</ul>
				</el-col>
        <el-col :xs="24" :sm="18">
					<components :is="view" @jump="jump"></components>
				</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
			leftList: [
				{
					name: 'My Account',
					active: true
				},
				{
					name: 'My Orders',
					active: false
				},
				{
					name: 'My Downloadable Products',
					active: false
				},
				{
					name: 'My Wish List',
					active: false
				},
				{
					name: 'Address Book',
					active: false
				},
				{
					name: 'Account Information',
					active: false
				},
				{
					name: 'Stored Payment Methods',
					active: false
				},
				{
					name: 'My Product Reviews',
					active: false
				},
				{
					name: 'Newsletter Subscriptions',
					active: false
				},
				{
					name: 'My Saved Cards',
					active: false
				},
				{
					name: 'My Subscriptions',
					active: false
				},
			],
			title: 'My Account',
			view: 'Account'
		};
  },

  components: {
		HeadingTitle: () => import("_c/HeadingTitle"),
		Account: () => import("./components/account"),
		Orders: () => import("./components/orders"),
		Product: () => import("./components/product"),
		Wish: () => import("./components/wish"),
		Book: () => import("./components/book"),
		Information: () => import("./components/information"),
		Methods: () => import("./components/methods"),
		Reviews: () => import("./components/reviews"),
		Subscriptions: () => import("./components/subscriptions"),
		MySubscriptions: () => import("./components/mySubscriptions"),
		Cards: () => import("./components/cards"),
	},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
		_click(index) {
			if (this.leftList[index].name === this.title) return;
			this.title = this.leftList[index].name;
			for (let i in this.leftList) {
				this.leftList[i].active = false;
			}
			this.leftList[index].active = true;
			switch(index) {
				case 0:
					this.view = 'Account'
					break;
				case 1:
					this.view = 'Orders'
					break;
				case 2:
					this.view = 'Product'
					break;
				case 3:
					this.view = 'Wish'
					break;
				case 4:
					this.view = 'Book'
					break;
				case 5:
					this.view = 'Information'
					break;
				case 6:
					this.view = 'Methods'
					break;
				case 7:
					this.view = 'Reviews'
					break;
				case 8:
					this.view = 'Subscriptions'
					break;
				case 9:
					this.view = 'Cards'
					break;
				case 10:
					this.view = 'MySubscriptions'
					break;
			}
		},
		jump(val) {
			this._click(val)
		}
	},

  watch: {}
};
</script>
<style lang="scss" scoped>
.my-account-box-container {
	max-width: 1250px;
	overflow: hidden;
	padding: 0 10px;
	margin: 0 auto 40px;
	ul,li {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	ul {
		margin-bottom: 40px;
	}
	li {
		line-height: 22px;
		margin-bottom: 12px;
		font-size: 14px;
		color: #3e3e3e;
		cursor: pointer;
		&:nth-child(7),
		&:nth-child(4) {
			margin-bottom: 24px;
		}
		&.active {
			color: #1a1a1a;
			font-weight: 600;
		}
	}
}
</style>
